<template>
  <div class="ql-container ql-snow">
  <div class="article">
    <h2 class="title" v-text="article.title"></h2>
    <p class="author" v-text="article.author"></p>
    <p class="apply-time">发表时间：{{article.applyTime}}</p>
    <div class="category">
      <el-tag size="mini" style="margin: 5px;cursor: pointer;" type="success" offect="dark" v-for="item in article.categoryList" :key="item.categoryId" v-text="item.categoryName"></el-tag>
    </div>
    <p class="profile" v-text="article.profile"></p>
    <div class="ql-editor" v-html="article.content"></div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'Article',
  props: ['article'],
  data () {
    return {}
  }
}
</script>

<style scoped lang="scss">
.article{
  width: 780px;
  margin: 0 auto;
  .title{
    text-align: center;
    margin-top: 25px;
    margin-bottom: 15px;
  }
  .author,.apply-time,.category{
    text-align: center;
    margin-bottom: 15px;
  }
  .profile{
    margin-bottom: 15px;
    border-left: 4px solid #42b983;
    color: #777;
    background-color: rgba(66,185,131,.1);
    padding: 10px 15px;
  }
}

</style>
<style>
.ql-editor img{
  max-width: 70%;
}
.ql-container.ql-snow{
  border: none !important;
}
</style>
